<template>
	<view>
		<view class="container">
			<song-list :song_list="songs" :nextOrPrevId="nextOrPrevId" :reachBottom="reachBottom" :keywords="keywords"
				@showSongEmit="showSongEmit" @lyricEmit="lyricEmit" @isChangeEmit="isChangeEmit"
				@currentTimeEmit="currentTimeEmit" @audioEmit="audioEmit" @currentIndexEmit="currentIndexEmit" />
		</view>
	</view>
</template>

<script>
	export default {
		name: "search-songs",
		props: {
			songs: {
				type: Array,
				default: () => {
					return [];
				}
			},
			nextOrPrevId: {
				type: Object,
				default: () => {
					return {};
				}
			},
			reachBottom: {
				type: Boolean,
				default: () => {
					return false;
				}
			},
			keywords: {
				type: String,
				default: () => {
					return '';
				}
			}
		},
		data() {
			return {
				showSong: false, //展示歌词
				lyric: '', //歌词
				currentTime: 0, //歌词播放时间
				isChange: false, //是否切歌
				currentIndex: 0, //当前音乐的index
				audio: null,
			};
		},
		methods: {
			showSongEmit(e) {
				this.showSong = e;
				this.$emit('showSongEmit', this.showSong);
			},
			lyricEmit(e) {
				this.lyric = e;
				this.$emit('lyricEmit', this.lyric);
			},
			isChangeEmit(e) {
				this.isChange = e;
				this.$emit('isChangeEmit', this.isChange);
			},
			currentTimeEmit(e) {
				this.currentTime = e;
				this.$emit('currentTimeEmit', this.currentTime);
			},
			audioEmit(e) {
				this.audio = e;
				this.$emit('audioEmit', this.audio);
			},
			currentIndexEmit(e) {
				this.currentIndex = e;
				this.$emit('currentIndexEmit', this.currentIndex);
			},
		}
	}
</script>

<style>
	.container {
		width: 95%;
		margin: 20rpx auto;
	}
</style>
